<template>
  <div style="display: flex">
    <div ref="chartDom" class="container">
  </div>
  <h1 style="color:red">{{date_end - date_start}}ms</h1>
  <div class="select">
    <p>缺陷筛选</p>
    缺陷A
    <input type="checkbox" @click="handA" checked>
    缺陷B
    <input type="checkbox" @click="handB" checked>
  </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
  name: 'hello-world',
  data () {
    return {
      result: {
        a: [],
        b: []
      },
      date_start: 0,
      date_end: 0,
       option : {
        title: {
            left: 'center',
            subtext: 'Fake data'
        },
        tooltip: {},
        toolbox: {
            right: 20,
            feature: {
                dataZoom: {}
            }
        },
        grid: {
            right: 70,
            bottom: 70
        },
        xAxis: [{
        }],
        yAxis: [{
        }],
        dataZoom: [{
            type: 'inside'
        }, {
            type: 'slider',
            showDataShadow: false,
            handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%'
        }, {
            type: 'inside',
            orient: 'vertical'
        }, {
            type: 'slider',
            orient: 'vertical',
            showDataShadow: false,
            handleIcon: 'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%'
        }],
        animation: false,
        series: [
          {
            type: 'scatter',
            data: [],
            dimensions: ['x', 'y'],
            symbolSize: 1,
            itemStyle: {
                opacity: 0.4
            },
            blendMode: 'source-over',
            large: true,
            largeThreshold: 500
          },
          {
            type: 'scatter',
            color: 'red',
            data: [],
            dimensions: ['x', 'y'],
            symbol:'rect',
            symbolSize: 1,
            itemStyle: {
                opacity: 0.4
            },
            blendMode: 'source-over',
            large: true,
            largeThreshold: 500
          }
        ]
    },
      myChart: null,
    }
  },
  created () {
      
  },
  mounted () {
    this.getData()
    this.myChart = echarts.init(this.$refs.chartDom);
    // this.setData()
    this.myChart.on('finished',() =>{
        this.date_end = new Date().getTime();
    })
  },
  methods:{
    
    handA (e) {
      console.log(e.target.checked);
      if (e.target.checked) {
        this.option.series[0].data = this.result.a;
        this.myChart.setOption(this.option);
      } else {
        this.option.series[0].data = [];
        this.myChart.setOption(this.option);
      }
    },
    handB (e) {
      console.log(e.target.checked);
      if (e.target.checked) {
        this.option.series[1].data = this.result.b;
        this.myChart.setOption(this.option);
      } else {
        this.option.series[1].data = [];
        this.myChart.setOption(this.option);
      }
    },
    async getData () {
      console.log(1);
       let res = await axios.get('http://127.0.0.1:4000/test');
       let res1 = await axios.get('http://127.0.0.1:4000/test1');
       this.result.a = res.data.data;
       this.result.b = res1.data.data;
       console.log(res1,);
       this.date_start = new Date().getTime();
       this.option.series[0].data = res.data.data;
       this.option.series[1].data = res1.data.data;
       this.myChart.setOption(this.option);
    }
  },

}
</script>

<style>
.container{
  margin: 0 auto;
  height: 3500px;
  width: 500px;
}
.select{
  width: 500px;
  height: 400px;
  margin: 80px 0 0 50px;
  text-align: center;
  border: 1px solid red;
}
</style>